<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
      :immediate-check="false"
    >
   <comment-item  @reply-click="$emit('reply-click',$event)" v-for="(item,index) in list" :key="index" :comment="item"></comment-item>
</van-list>
  </div>
</template>
<script>
import { getArticleComment } from "@/api/comment"
import CommentItem from "./comment-item"
export default {
    data(){
        return{ 
          // list: [],
          loading: false,
          finished: false,
          offset:null,  // 获取下一页的标记
          limit:10,
          error:false
        }
    },
    props:{
        source:{
          type:[String,Number,Object],
          required:true
        },
        list:{  // list是一个数组，引用数据类型，和外部共享
          type:Array,
          default:()=>[]
        },
        type:{
          type:String,
          default:"a",
          validator(value){
            return ['a','c'].includes(value)
          }
        }
    },
    created(){
      // 自己手动加载第一屏数据，就要关闭自动加载。且手动设置loading为true
      // 避免后期数据造成重复问题。
      this.loading = true;
      this.onLoad();
    },
    methods:{
      async onLoad() {
        try {
          /**
           * 获取文章评论和获取评论回复是同一个接口地址，只不过提交的type不同和source不同
           * type 
           *    a表示  文章评论
           *    c表示  评论回复
           * source: 要文章评论则给文章id，要评论回复则给评论id
           */
          // 1、获取评论列表数据
            let { data } = await getArticleComment({
              type:this.type,  //   a-对文章(article)的评论，c-对评论(comment)的回复
              source:this.source.toString(),  // 源id，或者评论id  【深坑，需要toString转化一下】
              offset:this.offset,  // 评论id的偏移量
              limit:this.limit     // 评论个数
            });
            const { results } = data.data;
            // 2、将数据添加到列表中
            this.list.push(...results)
            // 把文字评论的总数量传递给外部组件
            this.$emit('onload-success',data.data)
            // 3、将loading设置为false
            this.loading = false
            // 4、判断是否还有数据
            if(results.length){
              // 有数据就更新下一页数据页面
              this.offset = data.data.last_id;
            }else{
              // 没有将finished设置为true
              this.finished = true
            }
        } catch (error) {
          this.error = true;
          this.loading = false
        }
      }
    },
    components:{
      CommentItem
    }
}
</script>
<style scoped>
</style>